<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo</title>
  <!--    导入vue-->
  <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
  <!--    ajax异步请求-->
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="app">
  <form>
    <div>编号：<input type="text" v-model="goods.goodsid"/></div>
    <div>名称：<input type="text" v-model="goods.goodsname"/></div>
    <div>时间：<input type="text" v-model="goods.createtime"/></div>
    <div>类型：
<!--      <input type="text" v-model="goods.goodstype"/>-->
      <select v-model="goods.goodstype" >
        <option v-for="(type,index) in typeList"
                :value="type.typeid" :label="type.typename" >
        </option>
      </select>
    </div>
    <div>价格：<input type="text" v-model="goods.price"/></div>
    <div><input type="button" value="提交" @click="submit"/></div>
    <div><input type="button" value="获取类型列表" @click="getTypeList"/></div>
  </form>
</div>
<script>
  //vue数据模型
  const app = {
    data() {
      return {
        urlPrefix: "/mvc",
        //商品对象
        goods: {
          goodsid: null,
          goodsname: null,
          goodstype: null,
          price: null,
          createtime: null,
        },
        //类型列表
        typeList:[]
      }
    },
    //事件方法
    methods: {
      //提交
      submit() {
        axios.post(this.urlPrefix + '/goods/submit', this.goods)
            .then((response) => {
              let result = response.data;
              if (result.code === 200) {
                alert(result.msg);
                window.location.href = "goodsInfoList.html";
              } else {
                alert("添加失败");
              }
            })
            .catch((error) => { // 请求失败处理
              // alert(JSON.stringify(error));
              alert(error.response.data.msg);
            });
      },
      //获取类型列表
      getTypeList(){
        axios.get(this.urlPrefix + '/goods/getTypeList')
            .then((response)=> {
              let result = response.data;
              let list = result.map.list;
              this.typeList = list;
            })
            .catch(function (error) { // 请求失败处理
              console.log(error);
            });

      }
    }
  }
  //创建一个vue管理的数据模型  绑定html模板视图
  Vue.createApp(app).mount('#app')
</script>
</body>
</html>